import { cn, Heading, InfoCard } from '@theguild/components';

export function CapabilitiesSection(props: React.HTMLAttributes<HTMLElement>) {
  return (
    <section
      {...props}
      className={cn(
        'bg-beige-100 rounded-3xl px-4 pt-6 sm:py-24 md:px-6 md:py-[120px]',
        props.className,
      )}
    >
      <Heading as="h2" size="md" className="text-balance sm:px-6 sm:text-center max-sm:text-[34px]">
        Extend the capabilities
      </Heading>
      <p className="text-green-800 sm:text-center mt-4">
        Expand your gateway capabilities robustly with Mesh plugins, tailored to your enterprise
        needs.
      </p>
      <ul className="flex flex-row flex-wrap justify-center divide-y divide-solid sm:mt-6 sm:divide-x sm:divide-y-0 md:mt-16 md:px-6 xl:px-16">
        <InfoCard
          as="li"
          heading="Cloud and Self-Hosted"
          icon={<CacheHitsIcon />}
          className="flex-1 px-0 sm:px-8 sm:py-0 md:px-8 md:py-0"
        >
          Enhance performance with easy-to-implement caching solutions in Mesh for faster GraphQL
          responses.
        </InfoCard>
        <InfoCard
          as="li"
          heading="Monitoring & Tracing"
          icon={<FocusIcon />}
          className="flex-1 basis-full px-0 sm:basis-0 sm:px-8 sm:py-0 md:px-8 md:py-0"
        >
          Monitor and trace your GraphQL service with Mesh, integrating seamlessly with Prometheus,
          NewRelic, Sentry, StatD and OpenTelemetry.
        </InfoCard>
        <InfoCard
          as="li"
          heading="Enhanced Security"
          icon={<ShieldIcon />}
          className="flex-1 px-0 sm:px-8 sm:py-0 md:px-8 md:py-0 sm:max-lg:basis-full sm:max-lg:!border-0 sm:max-lg:mt-8"
        >
          Secure your GraphQL services with advanced authentication, authorization, and
          rate-limiting features in Mesh.
        </InfoCard>
      </ul>
    </section>
  );
}

function CacheHitsIcon() {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="25"
      viewBox="0 0 24 25"
      fill="currentColor"
    >
      <path d="M16.4998 17.4499V15.6499H16.9498C17.4691 15.6499 17.9804 15.5214 18.4381 15.276C18.8958 15.0305 19.2856 14.6757 19.573 14.2432C19.8604 13.8106 20.0364 13.3137 20.0854 12.7967C20.1343 12.2796 20.0546 11.7585 19.8534 11.2798C19.6523 10.801 19.3358 10.3793 18.9323 10.0524C18.5288 9.72549 18.0507 9.50341 17.5406 9.40593C17.0305 9.30846 16.5042 9.33861 16.0086 9.49372C15.5129 9.64883 15.0633 9.92407 14.6998 10.2949V10.2499C14.6995 9.26004 14.427 8.28927 13.9122 7.44374C13.3974 6.5982 12.6601 5.91044 11.7809 5.45562C10.9017 5.00079 9.91433 4.7964 8.92679 4.86478C7.93924 4.93316 6.98949 5.27169 6.18133 5.84336C5.37318 6.41503 4.73771 7.19784 4.34438 8.10626C3.95105 9.01467 3.815 10.0137 3.95108 10.9942C4.08717 11.9748 4.49016 12.899 5.11602 13.666C5.74188 14.4329 6.56652 15.0131 7.49981 15.343V17.2231C6.30615 16.9143 5.21181 16.304 4.32164 15.4509C3.43147 14.5978 2.7753 13.5303 2.416 12.3509C2.05671 11.1714 2.00631 9.91944 2.26966 8.71491C2.53301 7.51039 3.10127 6.39367 3.91999 5.47176C4.73872 4.54985 5.78048 3.85364 6.94545 3.44983C8.11043 3.04602 9.35959 2.94814 10.5732 3.16558C11.7869 3.38301 12.9244 3.90848 13.8767 4.69162C14.829 5.47476 15.5643 6.48934 16.012 7.63815C16.6889 7.50864 17.3853 7.52189 18.0567 7.67704C18.7281 7.83219 19.3598 8.12582 19.9112 8.53914C20.4626 8.95246 20.9216 9.47636 21.2589 10.0773C21.5962 10.6782 21.8042 11.343 21.8698 12.029C21.9354 12.715 21.857 13.4071 21.6396 14.0611C21.4223 14.715 21.0708 15.3164 20.6077 15.8267C20.1446 16.3369 19.58 16.7449 18.9501 17.0244C18.3202 17.304 17.6389 17.4489 16.9498 17.4499L16.4998 17.4508V17.4499ZM9.29981 15.6499H11.0998V19.2499H9.29981V15.6499ZM12.8998 18.3499H14.6998V21.9499H12.8998V18.3499Z" />
    </svg>
  );
}

function FocusIcon() {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="25"
      viewBox="0 0 24 25"
      fill="currentColor"
    >
      <path d="M12 19.2498C13.9096 19.2498 15.7409 18.4912 17.0912 17.141C18.4414 15.7907 19.2 13.9594 19.2 12.0498C19.2 10.1402 18.4414 8.3089 17.0912 6.95864C15.7409 5.60837 13.9096 4.8498 12 4.8498C10.0904 4.8498 8.25909 5.60837 6.90883 6.95864C5.55857 8.3089 4.8 10.1402 4.8 12.0498C4.8 13.9594 5.55857 15.7907 6.90883 17.141C8.25909 18.4912 10.0904 19.2498 12 19.2498ZM12 21.0498C7.0293 21.0498 3 17.0205 3 12.0498C3 7.0791 7.0293 3.0498 12 3.0498C16.9707 3.0498 21 7.0791 21 12.0498C21 17.0205 16.9707 21.0498 12 21.0498ZM12 15.6498C12.9548 15.6498 13.8705 15.2705 14.5456 14.5954C15.2207 13.9203 15.6 13.0046 15.6 12.0498C15.6 11.095 15.2207 10.1794 14.5456 9.50422C13.8705 8.82909 12.9548 8.4498 12 8.4498C11.0452 8.4498 10.1295 8.82909 9.45442 9.50422C8.77928 10.1794 8.4 11.095 8.4 12.0498C8.4 13.0046 8.77928 13.9203 9.45442 14.5954C10.1295 15.2705 11.0452 15.6498 12 15.6498ZM12 17.4498C10.5678 17.4498 9.19432 16.8809 8.18162 15.8682C7.16893 14.8555 6.6 13.482 6.6 12.0498C6.6 10.6176 7.16893 9.24412 8.18162 8.23143C9.19432 7.21873 10.5678 6.6498 12 6.6498C13.4322 6.6498 14.8057 7.21873 15.8184 8.23143C16.8311 9.24412 17.4 10.6176 17.4 12.0498C17.4 13.482 16.8311 14.8555 15.8184 15.8682C14.8057 16.8809 13.4322 17.4498 12 17.4498ZM12 13.8498C11.5226 13.8498 11.0648 13.6602 10.7272 13.3226C10.3896 12.985 10.2 12.5272 10.2 12.0498C10.2 11.5724 10.3896 11.1146 10.7272 10.777C11.0648 10.4394 11.5226 10.2498 12 10.2498C12.4774 10.2498 12.9352 10.4394 13.2728 10.777C13.6104 11.1146 13.8 11.5724 13.8 12.0498C13.8 12.5272 13.6104 12.985 13.2728 13.3226C12.9352 13.6602 12.4774 13.8498 12 13.8498Z" />
    </svg>
  );
}

function ShieldIcon() {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="25"
      viewBox="0 0 24 25"
      fill="currentColor"
    >
      <path d="M4.6046 3.7933L11.9999 2.1499L19.3952 3.7933C19.5951 3.83773 19.7738 3.94897 19.9019 4.10867C20.03 4.26836 20.0999 4.46697 20.0999 4.6717V13.66C20.0998 14.549 19.8803 15.4242 19.4608 16.2079C19.0413 16.9917 18.4348 17.6597 17.6951 18.1528L11.9999 21.9499L6.3047 18.1528C5.56515 17.6598 4.95872 16.9919 4.53922 16.2083C4.11971 15.4247 3.90012 14.5497 3.8999 13.6609V4.6717C3.89994 4.46697 3.96978 4.26836 4.09789 4.10867C4.22601 3.94897 4.40475 3.83773 4.6046 3.7933ZM5.6999 5.3935V13.66C5.69991 14.2526 5.84622 14.8361 6.12584 15.3586C6.40546 15.8811 6.80974 16.3265 7.3028 16.6552L11.9999 19.7872L16.697 16.6552C17.1899 16.3265 17.5941 15.8813 17.8738 15.359C18.1534 14.8366 18.2997 14.2534 18.2999 13.6609V5.3935L11.9999 3.9949L5.6999 5.3935Z" />
    </svg>
  );
}
